<template>
  <div class="container-fluid" id="login-box">
    <div class="row justify-content-md-center">
      <div class="col-md-auto align-self-center">
        <a-card style="width:400px;" title="经研工具后台">
          <a-form @submit="onSubmit" @reset="onReset">
            <a-form-item>
              <a-input v-model="username" placeholder="用户名" trim></a-input>
            </a-form-item>
            <a-form-item>
              <a-input type="password" placeholder="密码" v-model="password" trim></a-input>
            </a-form-item>
            <a-button type="primary" html-type="submit" block :disabled="!username || !password">登陆</a-button>
          </a-form>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Card,
  Form,
  Input,
  Button
} from 'ant-design-vue';

export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },

  components: {
    ACard: Card,
    AForm: Form,
    AInput: Input,
    AButton: Button,
    AFormItem: Form.Item,
  },

  methods: {
    onSubmit() {
      this.$api["Auth"]
        .post({ username: this.username, password: this.password })
        .then(res => {
          if (res.token) {
            localStorage.setItem("token", res.token);
            localStorage.setItem("username", this.username);
            this.$router.replace("/main");
          } else {
            this.$bvToast.toast("账号或密码错误，请重新输入!", {
              title: "错误",
              variant: "danger",
              toaster: "b-toaster-top-center"
            });
          }
        });
    },
    onReset() {
      this.username = "";
      this.password = "";
    }
  }
};
</script>

<style scoped>
#login-box {
  height: 100%;
  width: 100%;
  background-color: #e0e0e0;
  padding: 8px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
